/**
 * Created by zzc on 2017/9/13.
 */

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {
    Text,
    View,
    Image,
    StyleSheet
} from 'react-native';

const propTypes = {
    selected: PropTypes.bool,
    title: PropTypes.string,
};

class TabBar extends Component{
    constructor(props){
        super(props);
        this.data={
            tab_home:{
                title:"首页",
                icon:this.props.focused?require('../../resource/images/tab_shouye_selected.png'):require('../../resource/images/tab_shouye_normal.png'),
            },
            tab_find_house:{
                title:"找房",
                icon:this.props.focused?require('../../resource/images/tab_zhaofang_selected.png'):require('../../resource/images/tab_zhaofang_normal.png'),
            },
            tab_discovery:{
                title:"发现",
                icon:this.props.focused?require('../../resource/images/tab_shequ_selected.png'):require('../../resource/images/tab_shequ_normal.png'),
            },
            tab_mine:{
                title:"我的",
                icon:this.props.focused?require('../../resource/images/tab_wo_selected.png'):require('../../resource/images/tab_wo_normal.png'),
            }
        }
    }
    render(){
        let param=this.data[this.props.navigation.state.key];
        let activeStyle=this.props.focused?{color:"black"}:{color:"#979797"};
        return <View>
            <Image style={styles.image} source={param.icon}/>
            <Text style={[activeStyle,styles.tabbarItem]}>{param.title}</Text>
        </View>
    }
}

const styles = StyleSheet.create({
    image: {
        height: 20,
        width: 20,
    },
    tabbarItem:{
        alignItems:"center",
        justifyContent:"center",
        textAlign:"center",
        fontSize:11,
        marginTop:3
    }
});

TabBar.propTypes = propTypes;

export default TabBar;
